<template>
    <div class="line1">
        <div id="line1" class="" style="width: 80%;height:450px;"></div>
    </div>
</template>

<script>
    //vuecli脚手架中也支持 node中的模块化  common 规范   一般写代码用ES6的模块化
    // 引入 ECharts 主模块
    var echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/legend');
    require('echarts/lib/component/grid');
    require('echarts/lib/component/toolbox');
    require('echarts/lib/component/markPoint');


    //ES6的模块化
    // import echarts from 'echarts/lib/echarts';
    // // 引入柱状图
    // import 'echarts/lib/chart/bar';
    // import 'echarts/lib/chart/line';
    // import 'echarts/lib/chart/pie';
    // import 'echarts/lib/component/title';
    // import 'echarts/lib/component/legend';
    // import 'echarts/lib/component/toolbox';
    // import 'echarts/lib/component/markPoint';
    // import 'echarts/lib/component/tooltip';


  // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
  // import * as echarts from 'echarts/core';
  // // 引入柱状图图表，图表后缀都为 Chart
  // import {
  //     BarChart,PieChart
  // } from 'echarts/charts';
  // // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
  // import {
  //     TitleComponent,
  //     TooltipComponent,
  //     GridComponent
  // } from 'echarts/components';
  // // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  // import {
  //     CanvasRenderer
  // } from 'echarts/renderers';

  // // 注册必须的组件
  // echarts.use(
  //     [TitleComponent, TooltipComponent, GridComponent, BarChart,PieChart, CanvasRenderer]
  // );






    export default {
        name : "Echarts",
        data(){
          return {
            arr:["2021-06-03","2021-06-04","2021-06-05","2021-06-06","2021-06-07","2021-06-08","2021-06-09"],
            arr2:[[24,22,15,12,28,13,5],[13,43,17,0,0,3,0],[45,38,48,20,37,32,5]]
          }
        },
        methods : {
            initData(){
                const colors = ['#5793f3', '#675bba', '#d14a61'];
                const option = {
                    color: colors,
                    title: {
                        text: '走势图',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['新注册用户', '新增订单', '新增管理员']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['bar', 'line']},
                            restore: {},
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        // data: ["2021-06-03","2021-06-04","2021-06-05","2021-06-06","2021-06-07","2021-06-08","2021-06-09"],
                        data: this.arr
                    },
                    yAxis: [
                        {
                          type: 'value',
                          name: '用户',
                          min: 0,
                          max: 200,
                          position: 'left',
                          axisLine: {
                              lineStyle: {
                                  color: '#999'
                              }
                          },
                          axisLabel: {
                              formatter: '{value}'
                          }
                        },
                        {
                          type: 'value',
                          name: '订单',
                          min: 0,
                          max: 200,
                          position: 'right',
                          axisLine: {
                              lineStyle: {
                                  color: '#999'
                              }
                          },
                          axisLabel: {
                              formatter: '{value}'
                          }
                        }, 
                    ],
                    series: [
                        {
                            name:'新注册用户',
                            type:'line',
                            // data:[24,22,15,12,28,13,5],
                            data: this.arr2[0],
                            yAxisIndex: 1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                        },
                        {
                            name:'新增订单',
                            type:'line',
                            // data:[13,43,17,0,0,3,0],
                             data: this.arr2[1],
                            yAxisIndex: 1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                        },
                        {
                            name:'新增管理员',
                            type:'line',
                            // data:[45,38,48,20,37,32,5],
                            data: this.arr2[2],
                            yAxisIndex: 1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                        }
                    ]
              };
                 this.myChart.setOption(option);
            }
           
        },
        mounted(){
            this.myChart = echarts.init(document.getElementById('line1'));
            this.initData();
        },
    }
    // 选项具体参数参考
    // https://www.echartsjs.com/zh/option.html#
</script>

<style lang="scss" scoped>
.line1{
    padding-top: 100px;
    display: flex;
    justify-content: center;
    background-color: white
}



</style>